<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select name="" id="color">
        <option value="0">请选择字体的颜色</option>
        <option value="red">红</option>
        <option value="yellow">黄</option>
        <option value="green">绿</option>
    </select>
    <select name="" id="background">
        <option value="0">请选择背景的颜色</option>
        <option value="red">红</option>
        <option value="yellow">黄</option>
        <option value="green">绿</option>
    </select>
    <select name="" id="fontSize">
        <option value="0">请选择字体的大小</option>
        <option value="20px">20px</option>
        <option value="30px">30px</option>
        <option value="40px">40px</option>
    </select>
    <hr/>
    <p>程序员最讨厌的四件事件：写注释，写文档，别人不写注释，别人不写文档</p>
</body>
<script>
    const selects = document.querySelectorAll("select");
    const p = document.querySelector("p");
    selects[0].onchange = function(){
        if(this.value === "0") return;
        p.style.color=this.value;
    }
    selects[1].onchange = function(){
        if(this.value === "0") return;
        p.style.background=this.value;
    }
    selects[2].onchange = function(){
        if(this.value === "0") return;
        p.style.fontSize=this.value;
    }
</script>
</html>